<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API连接测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-section {
            background: white;
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-title {
            color: #1890ff;
            margin-bottom: 15px;
        }
        button {
            background: #1890ff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background: #40a9ff;
        }
        .result {
            margin-top: 15px;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 5px;
            border-left: 4px solid #1890ff;
            white-space: pre-wrap;
            font-family: monospace;
            max-height: 300px;
            overflow-y: auto;
        }
        .success {
            border-left-color: #52c41a;
            background: #f6ffed;
        }
        .error {
            border-left-color: #ff4d4f;
            background: #fff2f0;
        }
        .loading {
            color: #999;
        }
    </style>
</head>
<body>
    <h1>API连接测试</h1>
    
    <div class="test-section">
        <h2 class="test-title">后端API状态</h2>
        <button onclick="testHealth()">测试健康检查</button>
        <div id="health-result" class="result">点击按钮测试</div>
    </div>

    <div class="test-section">
        <h2 class="test-title">获取热搜数据</h2>
        <button onclick="testHotspots()">测试微博热搜</button>
        <button onclick="testZhihu()">测试知乎热搜</button>
        <button onclick="testBaidu()">测试百度热搜</button>
        <div id="hotspots-result" class="result">点击按钮测试</div>
    </div>

    <div class="test-section">
        <h2 class="test-title">平台列表</h2>
        <button onclick="testPlatforms()">测试平台列表</button>
        <div id="platforms-result" class="result">点击按钮测试</div>
    </div>

    <script>
        const API_BASE = 'http://localhost:3001/api';
        
        async function testHealth() {
            const resultEl = document.getElementById('health-result');
            resultEl.className = 'result loading';
            resultEl.innerHTML = '测试中...';
            
            try {
                const response = await fetch(`${API_BASE}/hotspots/health/check`);
                const data = await response.json();
                resultEl.className = 'result success';
                resultEl.innerHTML = JSON.stringify(data, null, 2);
            } catch (error) {
                resultEl.className = 'result error';
                resultEl.innerHTML = `错误: ${error.message}\n\n请检查:\n1. 后端服务器是否运行在 localhost:3001\n2. 是否存在CORS问题\n3. 网络连接是否正常`;
            }
        }

        async function testHotspots() {
            const resultEl = document.getElementById('hotspots-result');
            resultEl.className = 'result loading';
            resultEl.innerHTML = '获取微博热搜中...';
            
            try {
                const response = await fetch(`${API_BASE}/hotspots?platform=微博`);
                const data = await response.json();
                resultEl.className = 'result success';
                resultEl.innerHTML = `获取成功! 共 ${data.total} 条热搜\n\n` + 
                                   JSON.stringify(data.data.slice(0, 3), null, 2) + 
                                   (data.data.length > 3 ? '\n\n...（只显示前3条）' : '');
            } catch (error) {
                resultEl.className = 'result error';
                resultEl.innerHTML = `错误: ${error.message}`;
            }
        }

        async function testZhihu() {
            const resultEl = document.getElementById('hotspots-result');
            resultEl.className = 'result loading';
            resultEl.innerHTML = '获取知乎热搜中...';
            
            try {
                const response = await fetch(`${API_BASE}/hotspots?platform=知乎`);
                const data = await response.json();
                resultEl.className = 'result success';
                resultEl.innerHTML = `获取成功! 共 ${data.total} 条热搜\n\n` + 
                                   JSON.stringify(data.data.slice(0, 3), null, 2) + 
                                   (data.data.length > 3 ? '\n\n...（只显示前3条）' : '');
            } catch (error) {
                resultEl.className = 'result error';
                resultEl.innerHTML = `错误: ${error.message}`;
            }
        }

        async function testBaidu() {
            const resultEl = document.getElementById('hotspots-result');
            resultEl.className = 'result loading';
            resultEl.innerHTML = '获取百度热搜中...';
            
            try {
                const response = await fetch(`${API_BASE}/hotspots?platform=百度`);
                const data = await response.json();
                resultEl.className = 'result success';
                resultEl.innerHTML = `获取成功! 共 ${data.total} 条热搜\n\n` + 
                                   JSON.stringify(data.data.slice(0, 3), null, 2) + 
                                   (data.data.length > 3 ? '\n\n...（只显示前3条）'极 : '');
            } catch (error) {
                resultEl.className = 'result error';
                resultEl.innerHTML = `错误: ${error.message}`;
            }
        }

        async function testPlatforms() {
            const resultEl = document.getElementById('platforms-result');
            resultEl.className = 'result loading';
            resultEl.innerHTML = '获取平台列表中...';
            
            try {
                const response = await fetch(`${API_BASE}/hotspots/platforms/list`);
                const data = await response.json();
                resultEl.className = 'result success';
                resultEl.innerHTML = JSON.stringify(data, null, 2);
            } catch (error) {
                resultEl.className = 'result error';
                resultEl.innerHTML = `错误: ${error.message}`;
            }
        }
    </script>
</body>
</html>